<template>
    <div class="portraits content">
        <el-collapse-transition>
            <use-surplus
                v-if="!loadingDetail"
                :isHavingPower="isHavingPower" 
                @use="useSurplus"
                @afterBuy="afterBuy"
            ></use-surplus>
        </el-collapse-transition>

        <info-portraits
            :data="companyDetail"
        ></info-portraits>

        <el-card class="portraits-main">
            <skeleton 
            :loading="loadingDetail" 
            >

                <el-tabs v-model="activeName">
                    <el-tab-pane name="0">
                        <div 
                        slot="label"
                        class="info-tab-item-title"
                        v-czc="['查企业-详情（企业画像）', '导航' , '企业信息',0 ,'checkEnterprise-btn-enterpriseInfo']"
                        >
                            <img src="~@images/portraits/baseinfo.png" alt="">

                            <span>
                                企业信息
                            </span>
                        </div>

                        <!-- 1次 -->
                        <business-inquiries 
                            v-if="activeName=='0'" 
                            :isHavingPower="isHavingPower" 
                            :surplusNum="surplusNum" 
                            :company="companyName"
                            @use="useSurplus"
                            @afterBuy="afterBuy"
                        ></business-inquiries>
                    </el-tab-pane>

                    <!-- 招标分析 companyDetail.dwtype == 'cgdw' . 中标分析companyDetail.dwtype == 'tbqy' -->
                    <el-tab-pane 
                    name="1" 
                    v-if="companyDetail.zhaobiaofx == '1'"
                    >
                        <div 
                        slot="label"
                        class="info-tab-item-title"
                        v-czc="['查企业-详情（企业画像）', '导航' , '招标分析',0 ,'checkEnterprise-btn-bidAnalysis']"
                        >
                            <img src="~@images/portraits/portraits.png" alt="">
                            <span>
                                招标分析
                            </span>
                            <img src="/images/icon/icon-hot.png"/>
                        </div>

                        <zb-analysis 
                            v-if="activeName === '1'" 
                            :isLogin="isLogin"
                            :isHavingPower="isHavingPower" 
                            :company="companyName" 
                            :surplusNum="surplusNum" 
                            @use="useSurplus"
                        ></zb-analysis>
                    </el-tab-pane>

                    <el-tab-pane 
                    name="2" 
                    v-if="companyDetail.zhongbiaofx == '1'"
                    >
                        <div 
                        slot="label"
                        class="info-tab-item-title"
                        v-czc="['查企业-详情（企业画像）', '导航' , '中标分析',0 ,'checkEnterprise-btn-winAnalysis']"
                        >
                            <img src="~@images/portraits/portraits.png" alt="">
                            <span>
                                中标分析
                            </span>
                            <img src="/images/icon/icon-hot.png"/>
                        </div>

                        <zhongbiao-analysis 
                            v-if="activeName === '2'" 
                            :isLogin="isLogin"
                            :isHavingPower="isHavingPower" 
                            :company="companyName" 
                            :surplusNum="surplusNum"
                            @use="useSurplus"
                        ></zhongbiao-analysis>
                    </el-tab-pane>
                </el-tabs>

            </skeleton>
        </el-card>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

import notice from '@/mixins/notice.js';

import dialogWaitList from '@js/dialog-wait-list.js';
import {buildTdk} from '@config/tdk';

import Skeleton from './components/skeleton.vue';
import UseSurplus from './components/use-surplus.vue';
import InfoPortraits from './sections/info-portraits.vue';

import businessInquiries from './sections/business-inquiries/index.vue';
import ZbAnalysis from './sections/zb-analysis/index.vue';
import ZhongbiaoAnalysis from './sections/zhongbiao-analysis/index.vue';

export default {
    head() {
        return buildTdk('portraits');
    },
    layout: 'client',
    mixins: [notice],
    components: {
        Skeleton,
        UseSurplus,
        InfoPortraits,
        
        businessInquiries,
        ZbAnalysis,
        ZhongbiaoAnalysis,
    },
    async asyncData(context) {},
    data() {
        return {
            activeName: '0',
            
            companyDetail: {},
            loadingDetail: true,

            isLogin: null,
            isHavingPower: false,
        };
    },
    computed: {
        ...mapGetters({
            statisticData: 'userinfo/getStatisticData',
        }),

        companyGuid: function () {
            return this.getQuery('guid');
        },
        companyName: function () {
            return this.getQuery('company');
        },

        surplusNum() {
            var statisticData = this.statisticData || [];

            let arr = statisticData.filter((item) => item.name == '企业画像');

            if (arr.length > 0) {
                return arr[0].surplus;
                // return 0
            } else {
                return 0;
            }
        },
    },
    watch: {
        $route: {
            handler(to, form) {
                this.activeName = 0;
                this.isHavingPower = false;

                this.getCompanyDetail();    //正常显示，不受登录影响

                this.checkLogin();

                // 获取能否查看当前信息
                this.getPowerInfo()
            },
            deep: true,
        },
    },
    methods: {
        ...mapActions({
            queryStatisticData: 'userinfo/queryStatisticData',
        }),
        afterBuy() {
            this.queryStatisticData(() => {
                if (this.surplusNum > 0) {
                    // 如果有次数
                    this.useSurplus();
                }
            });
        },
        /**
         * 使用 企业画像 次数
         */
        useSurplus() {
            this.$ajax({
                type: 'post',
                url: `${this.$store.state.api.tbUrl}/portraits/useportraits.json`,
                data: {
                    objectname: this.companyName,
                    objectguid: this.companyGuid,
                    productcode: 'QYHX',
                },
                callback: function (data, res) {
                    ShowMsg('使用成功', 'success', function () {});
                    // 使用后直接根据回调更改状态
                    this.isHavingPower = data.ispermission;

                    // 获取剩余次数
                    this.queryStatisticData();
                },
                error: function () {},
            });
        },
        /**
         * 获取权限信息
         */
        getPowerInfo(cb) {
            this.$get(`${this.$store.state.api.tbUrl}/portraits/ispermission.json`, {
                objectname: this.companyName,
                objectguid: this.companyGuid,
            }, (data, res) => {
                this.isHavingPower = data.ispermission;

                cb && cb(data.ispermission);
            });
        },

        //获取企业信息
        getCompanyDetail () {
            this.loadingDetail = true;

            this.$get(`${this.$store.state.api.tbUrl}/home/getqydetail.json`, {
                companyid: this.companyGuid,
            }, (data, res) => {
                if (!data.bj) {
                    data.bj = '0';
                }

                this.companyDetail = data;

                this.loadingDetail = false;
            });
        },

        //检查登录状态、获取剩余次数
        checkLogin(){
            new Chain().link(next => {
                // 检查登录情况
                this.$store.dispatch('userinfo/checkIsLoginNoDoing',{
                    login: ()=>{
                        //登录后.
                        this.isLogin = true;

                        next();
                    },
                    noLogin: () =>{
                        this.isLogin = false;
                    }, 
                })
            }).link(next => {
                //个人中心 获取次数
                this.queryStatisticData(() => {
                    next();
                });
            }).run();
        },
    },
    created() {},
    mounted() {
        this.getCompanyDetail();    //正常显示，不受登录影响

        this.checkLogin();

        // 获取能否查看当前信息
        this.getPowerInfo((haspower) => {
            if (haspower) {
                // 可以直接查看企业信息
                return;
            }

            if (this.surplusNum <= 0) {
                // 没有使用次数
                return;
            }

            // 在列队中注册-分享引导登录
            dialogWaitList.push(() => {
                this.$confirm(`您有${this.surplusNum}次查看企业画像的次数，此操作只消耗一次`, '提示', {
                    confirmButtonText: '直接使用',
                    cancelButtonText: '取消',
                    type: 'success',
                }).then(() => {
                    this.useSurplus();
                    
                    dialogWaitList.next();
                }).catch(() => {
                    dialogWaitList.next();
                });
            }, 4);
        });
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.portraits {
    .portraits-main {
        margin-top: 8px;

        ::v-deep {
            .el-card__body {
                padding-top: 10px;
            }

            .el-button {
                border-radius: 0;
            }
        }

        .info-tab-item-title{
            display: flex;
            align-items: center;

            span{
                margin-left: .4em;
            }
        }
    }
}
</style>
